<template>
  <div>
    <!-- 轮播图 -->

    <div>
      <div class="fnan" @click="fanhui">
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/back-white.ee5cdaa6.svg"
          alt=""
        />
      </div>
      <van-swipe @change="onChange">
        <van-swipe-item
          v-for="(item, index) in goodlists.swiperImgs"
          :key="index"
        >
          <div class="imgxxq">
            <img :src="item" />
          </div>
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 商品介绍 -->
    <div class="spjs">
      <p class="price">&nbsp;￥{{ goodlists.price }}</p>
      <p>{{ goodlists.name }}</p>
    </div>
    <!-- 商品介绍 结束-->
    <!-- 商品富文本 -->
    <div class="spjs">
      <div class="sj">
        已选<span>{{ goodlists.name }}</span>
      </div>
      <div class="cn">
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />可送达海外&nbsp;
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />京东发货&售后&nbsp;
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />京准达&nbsp;
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />211限时达&nbsp;
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />可自提&nbsp;
        <img
          src="	http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          alt=""
        />不可使用优惠价
      </div>
    </div>
    <!-- 商品富文本接结束 -->
    <!-- 商品详情大图 -->
    <div class="spp6">
      <img
        v-for="item in goodlists.detailImgs"
        :key="item.id"
        :src="item"
        alt=""
      />
    </div>

    <van-goods-action color=" an">
      <van-goods-action-button disabled></van-goods-action-button>
      <van-goods-action-button text="加入购物车" class="btlf" @click="gwc" />
      <van-goods-action-button text="立即购买" class="btlr" @click="buy" />
    </van-goods-action>
  </div>
</template>

<script>
import { goodxqApi } from "@/api/home";
export default {
  props: {
    id: [Number, String],
  },
  data() {
    return {
      token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      goodlists: {},
      newcarlist: [], //购物车数据
      current: 0,
    };
  },
  async created() {
    let obj = {
      token: this.token,
      goodsId: this.id,
    };

    try {
      let { data } = await goodxqApi(obj);
      console.log(data);
      this.goodlists = data.data.goodsData;
      console.log(this.goodlists);
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    buy() {
      this.$router.push({ path: `/buy/${this.id}` });
    },
    gwc() {
      let newcarlist = this.goodlists;

      //先验证本地是否有上次的 购物车数据
      let oldcarlist = JSON.parse(localStorage.getItem("carlist") || "[]");
      if (oldcarlist == "") {
        newcarlist.num = 1; //给数量添加1
        oldcarlist.push(newcarlist);
        localStorage.setItem("carlist", JSON.stringify(oldcarlist));
        this.$router.push({ path: `/Cart/` });
      } else {
        let i = oldcarlist.findIndex((item) => {
          return item.id == newcarlist.id;
        });
        if (i == -1) {
          newcarlist.num = 1;
          oldcarlist.push(newcarlist);
          localStorage.setItem("carlist", JSON.stringify(oldcarlist));
          alert("添加成功");
          return this.$router.push({ path: `/Cart/` });
        } else {
          oldcarlist[i].num++;
          localStorage.setItem("carlist", JSON.stringify(oldcarlist));

          alert("当前商品已经存在购物车中");

          return this.$router.push({ path: `/Cart/` });
        }
        // for (var i = 0; i < oldcarlist.length; i++) {
        //   if (oldcarlist[i].id == newcarlist.id) {
        //     oldcarlist[i].num++;
        //     localStorage.setItem("carlist", JSON.stringify(oldcarlist));

        //     alert("当前商品已经存在购物车中");

        //     return this.$router.push({ path: `/Cart/` });
        //   } else {
        //     newcarlist.num = 1;
        //     oldcarlist.push(newcarlist);
        //     localStorage.setItem("carlist", JSON.stringify(oldcarlist));
        //     alert("添加成功");
        //     return this.$router.push({ path: `/Cart/` });
        //   }
        // }
        // this.$router.push({ path: `/Cart/` });
      }

      // if (oldcarlist.indexOf(this.newcarlist[1].id) == 1) {
      //   console.log(1);
      // }

      // oldcarlist.push(newcarlist);
      // localStorage.setItem("carlist", JSON.stringify(oldcarlist));
      // this.$store.commit("setcarlist", this.carlist);
      // this.$router.push({ path: `/Cart/` });
    },
    fanhui() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.fnan {
  z-index: 1;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background-color: #333;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}
.fnan img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.spp6 {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font: inherit;
}
.spp6 img {
  width: 99%;
  vertical-align: baseline;
  margin: -0.2rem 0;
  padding: 0;
  font: inherit;
}
.cn {
  margin-top: 1rem;
  color: #9999;
  font-size: 0.9rem;
}
.cn img {
  vertical-align: middle;
}
.sj {
  padding: 0.5rem;
  overflow: hidden;
  color: #9999;
  border-bottom: 1px solid #9999;
  height: 2rem;
  line-height: 1rem;
}
.sj span {
  font-weight: 500;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 18rem;
  color: black;
}
.price {
  color: red;
}
.spjs {
  padding: 0.5rem;
  background-color: #fff;
  margin-top: 1rem;
  font-size: 1.1rem;
}
.imgxxq {
  height: 25rem;
}
.imgxxq img {
  height: 100%;
  width: 100%;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5rem;
  padding: 2px 5px;
  font-size: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}
/deep/ .van-goods-action {
  height: 3rem;
  line-height: 3rem;
}
/deep/ .van-goods-action-button {
  height: 3rem;
}
/deep/ .btlf {
  background-color: red;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem;
}
/deep/ .btlr {
  background-color: #b8860b;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem;
  border-radius: 0;
}
</style>
